<template>
	<view style="display: flex;justify-content: center;width: 100%;margin-top: 30px;">
		<view style="display: flex;height: 360rpx ;width: 90%;">
			<view class="Three-item-one">
				<view >文字1</view>
				<image style="width: 50%;height: 85px;margin-top: 100rpx;" src="https://img.vrcinema.fun/svg/28b248313b47e7ad4569f50b40a785e.png"></image>
				
			</view>
			<view style="width: 50%;">
				<view class="Three-item-one two">
					<view>文字2</view>
					<image style="width: 50%;height: 60px;margin-left: 50%;" src="https://img.vrcinema.fun/svg/7bbbd8a64093724261060236b03d0eb.png"></image>
				</view>
				<view class="Three-item-one three">
					<view>文字3</view>
					
					<image  style="width: 50%;height: 60px;margin-left: 50%;" src="https://img.vrcinema.fun/svg/cc47a4a200fcca23bac7d40bd50a5e3.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.Three-item-one{

	border-radius: 20rpx;
	width: 50%;
	margin-right: 20rpx;
	padding: 15rpx;
	background: linear-gradient(0deg, #63B8F3, #fff);

}
.two{
	width:100%;
	height: 170rpx;
	margin-bottom: 20rpx;
}
.three{
	width:100%;
	height: 170rpx;
	
}
.Three-item{
	background-color: #63B8F3;
}
.image-one{
	
}
</style>
